<script>
  import ItemList from '../ItemList.svelte';
  import Stat from './Stat.svelte';
  import { FreeStats, enumStats } from './stat';

  const stats = enumStats();

  let { tick, game } = $props();

  let freePoints = $derived((tick, FreeStats.amount[game?.pc]));
</script>

<div>
  <h3>Stats</h3>
  <ItemList>
    {#each stats as [_, stat]}
      <Stat {stat} character={game?.pc} bind:tick />
    {/each}
  </ItemList>
  {freePoints} left
</div>
